// 设置节点、边，锚点的默认样式
function setStyle(keyShape, keyShapeStyle, text, textStyle) {
    keyShape.attr(keyShapeStyle);
    if (text) {
        text.attr(textStyle);
    }
}
// 获取节点或边的，默认样式，激活样式
function getItemStyle(type = 'node', group, state = 'hover') {
    const node = group.get('item');
    const attrs = group.getFirst().attr();
    // 原始样式
    const originStyle = type === 'node' ? node.get('originStyle') : node.get('originStyle')['edge-shape'];
    // 激活样式与默认样式
    const activeStyle = attrs.style[`${type}State:${state}`];
    const defaultStyle = attrs.style[`${type}State:default`];
    // 线不设置宽度，默认1px
    if (type === 'edge' && defaultStyle && defaultStyle.lineWidth === null) {
        defaultStyle.lineWidth = 1;
    };
    // 返回激活样式，默认样式，原有样式
    return {
        activeStyle,
        defaultStyle,
        originStyle
    }
}

const events = {
    // 锚点显示隐藏
    anchorShow(value, group) {
        if (value) {
            group.showAnchor(group);
        } else {
            group.clearAnchor(group);
        }
    }, // 锚点激活事件
    anchorActive(value, group) {
        if (value) {
            const node = group.get('item');
            const keyShape = group.getFirst();
            const bBox = keyShape.getBBox();
            const model = node.getModel();
            const { anchorPoints } = model;

            this.getAnchorPoints({ anchorPoints }).forEach((p, i) => {
                // 绘制锚点背景
                const anchorBg = group.addShape('circle', {
                    zIndex: 0,
                    attrs: {
                        x: bBox.minX + bBox.width * p[0],
                        y: bBox.minY + bBox.height * p[1],
                        r: 0,
                        opacity: 0.5,
                        fill: '#1890ff'
                    },
                    nodeId: keyShape.get('id'),
                    className: 'node-anchor-bg',
                    draggable: true,
                    isAnchor: true,
                    index: i
                });
                anchorBg.animate(
                    { r: 11 },
                    { duration: 200 }
                );
                // 将group中元素按照zIndex从大到小排序
                group.sort();
                group.anchorShapes.push(anchorBg);
            });
        } else {
            // 调用自定义事件，移除锚点
            group.clearAnchor(group);
        }
    },
    nodeState(value, group) {
        events[`nodeState:${value}`].call(this, value, group);
    }, // 节点恢复默认状态事件
    'nodeState:default'(value, group) {
        if (value) {
            const keyShape = group.getFirst();
            const { defaultStyle } = getItemStyle.call(this, 'node', group, 'default');
            setStyle(keyShape, defaultStyle);
        }
    }, // 节点selected事件
    'nodeState:selected'(value, group) {
        if (value) {
            const keyShape = group.getFirst();
            const { activeStyle, defaultStyle } = getItemStyle.call(this, 'node', group, 'selected');
            if (!activeStyle) return;
            if (value) {
                setStyle(keyShape, activeStyle);
            } else {
                setStyle(keyShape, defaultStyle);
            }
        }
    }, // 节点hover事件
    'nodeState:hover'(value, group) {
        if (value) {
            const keyShape = group.getFirst();
            const { activeStyle, defaultStyle } = getItemStyle.call(this, 'node', group, 'hover');
            if (!activeStyle) return;
            if (value) {
                setStyle(keyShape, activeStyle);
            } else {
                setStyle(keyShape, defaultStyle);
            }
        }
    },
    edgeState(value, group) {
        events[`edgeState:${value}`].call(this, value, group);
    },
    'edgeState:default'(value, group) {
        if (value) {
            const { activeStyle, defaultStyle } = getItemStyle.call(this, 'edge', group);
            const edge = group.getChildByIndex(0);
            if (defaultStyle) {
                const animateType = activeStyle.animationType || 'dash';
                // 停止动画
                this.stopAnimate(group, animateType);
                // 恢复默认状态
                setStyle(edge, { ...defaultStyle, animateType });
            }
        }
    },
    'edgeState:hover'(value, group) {
        const path = group.getChildByIndex(0);
        const { endArrow, startArrow } = path.get('attrs');
        const { activeStyle, defaultStyle, originStyle } = getItemStyle.call(this, 'edge', group, 'hover');
        if (!activeStyle) return;
        // hover态
        if (value) {
            const animateType = activeStyle.animateType || 'dash';
            // 有动画，执行动画，没有动画，修改edge颜色
            if (activeStyle.animate === true) {
                this.runAnimate(group, animateType);
            } else if (typeof activeStyle.animate === 'function') {
                activeStyle.animate.call(this, group);
            } else {
                setStyle(path, activeStyle);
                // 开始和结束箭头样式
                if (endArrow) {
                    path.attr(
                        'endArrow',
                        endArrow === true ? true : {
                            path: endArrow.path,
                            fill: activeStyle.stroke || originStyle.stroke
                        }
                    )
                }
                if (startArrow) {
                    path.attr(
                        'startArrow',
                        startArrow === true ? true : {
                            path: startArrow.path,
                            fill: activeStyle.stroke || originStyle.stroke
                        }
                    )
                }
            }
        // 还原到default态
        } else {
            const animateType = activeStyle.animateType || 'dash';
            // 有动画，停止动画。没有动画，还原样式
            if (activeStyle.animate === true) {
                this.stopAnimate(group, animateType);
            } else if (typeof activeStyle.animate === 'function') {
                activeStyle.animate.call(this, group, 'stop');
            } else {
                setStyle(path, defaultStyle);
                // 开始和结束箭头样式
                if (endArrow) {
                    path.attr(
                        'endArrow',
                        endArrow === true ? true : {
                            path: endArrow.path,
                            fill: defaultStyle.stroke || activeStyle.stroke || originStyle.stroke
                        }
                    )
                }
                if (startArrow) {
                    path.attr(
                        'startArrow',
                        startArrow === true ? true : {
                            path: startArrow.path,
                            fill: defaultStyle.stroke || activeStyle.stroke || originStyle.stroke
                        }
                    )
                }
            }
        }
    },
    'edgeState:selected'(value, group) {
        const path = group.getChildByIndex(0);
        const { endArrow, startArrow } = path.get('attrs');
        const { activeStyle, defaultStyle, originStyle } = getItemStyle.call(this, 'edge', group, 'selected');
        if (!activeStyle) return;
        // select态
        if (value) {
            const animateType = activeStyle.animateType || 'dash';
            // 有动画，执行动画，没有动画，修改edge颜色
            if (activeStyle.animate === true) {
                this.runAnimate(group, animateType);
            } else if (typeof activeStyle.animate === 'function') {
                activeStyle.animate.call(this, group);
            } else {
                setStyle(path, activeStyle);
                // 开始和结束箭头样式
                if (endArrow) {
                    path.attr(
                        'endArrow',
                        endArrow === true ? true : {
                            path: endArrow.path,
                            fill: activeStyle.stroke || originStyle.stroke
                        }
                    )
                }
                if (startArrow) {
                    path.attr(
                        'startArrow',
                        startArrow === true ? true : {
                            path: startArrow.path,
                            fill: activeStyle.stroke || originStyle.stroke
                        }
                    )
                }
            }
        // 还原到default态
        } else {
            const animateType = activeStyle.animateType || 'dash';
            // 有动画，停止动画。没有动画，还原样式
            if (activeStyle.animate === true) {
                this.stopAnimate(group, animateType);
            } else if (typeof activeStyle.animate === 'function') {
                activeStyle.animate.call(this, group, 'stop');
            } else {
                setStyle(path, defaultStyle);
                // 开始和结束箭头样式
                if (endArrow) {
                    path.attr(
                        'endArrow',
                        endArrow === true ? true : {
                            path: endArrow.path,
                            fill: defaultStyle.stroke || activeStyle.stroke || originStyle.stroke
                        }
                    )
                }
                if (startArrow) {
                    path.attr(
                        'startArrow',
                        startArrow === true ? true : {
                            path: startArrow.path,
                            fill: defaultStyle.stroke || activeStyle.stroke || originStyle.stroke
                        }
                    )
                }
            }
        }
    }
};

export default events;
